<template>
  <div class="settingList">
    <div class="main">
      <div class="main_top">
        <el-button size="small" type="primary" @click="addAccount"
          >新建角色</el-button
        >
      </div>
      <ex-table
        ref="table"
        :loading="loading"
        :table-column="tableColumn"
        :table-data="tableData"
        @pageSizeChange="handleSizeChange"
        @currentPageChange="handleCurrentChange"
      >
        <template v-slot:operate="{ scope }">
          <el-button type="primary" size="mini" @click="handleEdit(scope.row.id)">修改权限</el-button>
          <el-button type="primary" size="mini" @click="handleRoleName(scope.row)">编辑角色名称</el-button>
          <el-button @click="handledelete(scope.row.id)" size="mini" type="danger">删除</el-button>
        </template>
      </ex-table>
    </div>
    <detail-dialog
      ref="childRef"
      v-if="detailDialog"
      :id="id"
      :path="path"
      :visible.sync="detailDialog"
      @success="_handleSuccess"
    />
    <detail-dialog-name 
       v-if="detailDialogName"
      :id="id"
      :roleName="roleName"
      :visible.sync="detailDialogName"
      @success="_handleSuccess"
    />
  </div>
</template>
<script>
import store from '@/store'
// components
import DetailDialog from "./components/roleList/DetailDialog"; 
import DetailDialogName from "./components/roleList/DetailDialogName";
// api
import { getRoleList, getRoleMenus,deleteRole } from "@/api/setting";

// mixins
import handlePageMixin from "@/mixins/handlePageMixin";

export default {
  name: "settingList",
  components: {
    DetailDialog,
    DetailDialogName
  },
  mixins: [handlePageMixin],
  data() {
    
    return {
      loading: false,
      tableColumn: [
        { prop: "roleName", label: "角色名称" },
        { label: "操作", slot: true, slotName: "operate",width: '350' },
      ],
      detailDialog: false,
      detailDialogName: false,
      id: '',
      path: 'add',
      tableData: [],
      roleName: '',
    };
  },
  created() {
    this.getList();
    this.$store.dispatch('settings/getMenus')
  },
  mounted() {},
  methods: {
    //列表
    getList() {
      this.loading = true;
      const params = {
        ...this.pageOptions,
      };
      console.log("params", params);
      getRoleList(params)
        .then((res) => {
          const { total, records } = res.result;
          console.log("账号列表", records);
          this.$refs.table.pageOptions.total = total;
          this.tableData = records;
        })
        .finally(() => {
          this.loading = false;
        });
    },
 
    //新建子账号
    addAccount() {
      this.detailDialog = true;
      this.path = 'add'
    },
    //
    _handleSuccess(data) {
      this.pageOptions.pageNum = 1
      this.$refs.table.pageOptions.pageNum = 1
      this.getList();
    },
    //删除
    handledelete(id) {
      this.$confirm("是否删除?", "提示", {
        confirmButtonText: "删除",
        cancelButtonText: "否",
        type: "warning",
      })
      .then(() => {
        deleteRole(id)
          .then((res) => {
            this.handleSuccess("删除成功");
            this.getList();
          })
          .finally(() => {});
      })
      .catch(() => {});
    },
  
    handleSuccess(msg) {
      if (msg === "已拒绝") {
        var type = "error";
      } else {
        var type = "success";
      }
      this.$message({
        message: msg,
        type: type,
        duration: 1500,
        onClose: () => {
          this.handleClose();
          this.$emit("success");
        },
      });
    },
    //修改权限
    handleEdit(id){
      this.id = id 
      this.path = 'edit'
      this.detailDialog = true;
    },
    //编辑角色名称
    handleRoleName(row){
      this.id = row.id
      this.roleName = row.roleName
      this.detailDialogName = true
    },
  },
};
</script>
<style lang="scss" scoped>
@import "./style/setting";
.el-select .el-input {
  width: 130px;
}
.first_box {
  ::v-deep :nth-child(1).el-input__inner {
    width: 100px;
  }
  ::v-deep :nth-child(2).el-input__inner {
    width: 200px;
  }
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
</style>